<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@include file="/common/header.jsp"%>
<c:set var="path" value="../..${ctx}/define/database" />
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Pagination 分页表格</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link href="${ctx}/demo/demo.css" rel="stylesheet" type="text/css" />
<script src="${ctx}/scripts/boot.js" type="text/javascript"></script>
<script src="${ctx}/common/common.js" type="text/javascript"></script>
<style type="text/css">
html,body {
	margin: 0;
	padding: 0;
	border: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
</style>
</head>
<body>

	<div class="mini-splitter" style="width: 100%; height: 100%;">
		<!-- 左侧菜单 -->
		<div size="300" showCollapseButton="true">
			
			<!-- 顶部按钮 -->
			<ul id="menu2" class="mini-menubar mymenu" style="width:100%;">
				<li iconCls="icon-add" onclick="addTable()">新增</li>
		        <li iconCls="icon-remove" onclick="removeTable()">删除</li>
	            <li iconCls="icon-save" onclick="saveTable()">保存</li>
			    <li>
					<span iconCls="icon-download">操作</span>
					<ul>
						<li iconCls="icon-cut" onclick="onItemClick">导入</li>
				        <li iconCls="icon-add" onclick="onItemClick">导出</li>
					</ul>
				</li>
			</ul>

			<div class="mini-fit">
				<div id="left_layout" class="mini-layout" style="width: 100%; height: 100%;"  borderStyle="border:solid 1px #aaa;">
				    <!-- 中间主体树形表结构 -->
				    <div title="center" region="center"  showCollapseButton="true">
						<ul id="tree1" class="mini-tree" url="${path}/list.html" 
							style="width: 100%;" showTreeIcon="true" textField="name"
							idField="id" parentField="pid" resultAsTree="false">
						</ul>
				    </div>

				    <!-- 下面属性编辑器 -->
				    <div title="表定义" region="south" showCollapseButton="true" showSplit="false" showHeader="true" height="144" >
						    <div id="property1" class="mini-datagrid" style="width: 100%; height: 100%;" 
						        idField="id"
						        allowResize="true" showPager="false"
						        allowCellEdit="true" allowCellSelect="true"  allowColumnSort="false"
						    >
						    <div property="columns">
						            <div field="name" style="width: 30%;" headerAlign="center" >属性</div>
						            <div field="value"  style="width: 30%;" >值</div>    
						        </div>
						    </div>
						    <div style="display:none;">
						        <input class="mini-textbox" id="table_name" />
						        <input class="mini-textbox" id="table_text" />
						        <input class="mini-textbox" id="table_keyGenerate" />
						        <input class="mini-textbox" id="table_description" />
						    </div>
				    </div>
				</div>
			</div>

		</div>
		
		<!--中间表字段内容表格 -->
		<div showCollapseButton="true">
			<div class="mini-toolbar" style="padding: 2px; border-top: 0; border-left: 0; border-right: 0;">
				<a class="mini-button" iconCls="icon-add" plain="true" onclick="addRow()">新增</a> 
				<a class="mini-button" iconCls="icon-remove" plain="true" onclick="removeRow()">删除</a> 
				<span class="separator"></span> 
				<a class="mini-button" iconCls="icon-save" plain="true" onclick="saveData()">保存</a>
			</div>
			<div class="mini-fit">
				<div id="grid1" class="mini-datagrid"
					style="width: 100%; height: 100%;" borderStyle="border:0;"
					url="${path}/getTable.html"
					allowCellSelect="true" allowCellEdit="true" allowSortColumn="false" showPager="false" showModified="true">
					<div property="columns">
						<div name="name" field="name" headerAlign="center" allowSort="true" width="150">
							字段名称 <input property="editor" class="mini-textbox" style="width: 100%;" minWidth="150" />
						</div>
						<div name="text" field="text" headerAlign="center" allowSort="true" width="200">
							字段说明 <input property="editor" class="mini-textbox" style="width: 100%;" minWidth="200" />
						</div>
						<div name="type" field="type" headerAlign="center" allowSort="true" width="80">
							数据类型 <input property="editor" class="mini-combobox" url="../..${ctx}/define/dbmeta/getDataType.html" style="width: 100%;" minWidth="80" />
						</div>
						<div name="size" field="size" headerAlign="center" allowSort="true" width="40">
							长度 <input property="editor" class="mini-textbox" style="width: 100%;" minWidth="40" />
						</div>
						<div type="checkboxcolumn" field="pk" trueValue="1" falseValue="0" width="30" headerAlign="center">主键</div>
						<div type="checkboxcolumn" field="canNull" trueValue="1" falseValue="0" width="30" headerAlign="center">空值</div>
						<div name="defaultValue" field="defaultValue" headerAlign="center" allowSort="true" width="100">
							默认值<input property="editor" class="mini-textbox" style="width: 100%;" minWidth="100" />
						</div>
						<div name="javaType" field="javaType" headerAlign="center" allowSort="true" width="200">
							连接字段<input property="editor" class="mini-buttonedit" onbuttonclick="onButtonEdit" style="width: 100%;" minWidth="200" />
						</div>
						<div type="comboboxcolumn" name="linkType" field="linkType" headerAlign="center" allowSort="true" width="100">
							连接类型 <input property="editor" class="mini-combobox" data="database_link_types" style="width: 100%;" minWidth="100" />
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
<script type="text/javascript">
/*********************************************************
 * 初始化
 *********************************************************/	
mini.parse();
var tree = mini.get("tree1");
var grid = mini.get("grid1");
var prop = mini.get("property1");
setPropGrid("", "", "", "");

/*********************************************************
 * 自定义方法
 *********************************************************/	
/**
 * 新增字段
 */
function setPropGrid(_name,_text,_desc,_key) {
	var data = [
   		{id:"table_name", name: "表名称", value: _name, editor: "textbox"},
   		{id:"table_text", name: "表说明", value: _text, editor: "textbox"},
   		{id:"table_description", name: "描述", value: _desc, editor: "textbox"},
   		{id:"table_keyGenerate", name: "主键策略", value: _key, editor: "textbox"}
   	];
	prop.setData(data);
}

/*********************************************************
 * 事件
 *********************************************************/
	/**
	 * 左侧目录树的鼠标点击事件
	 */
	tree.on("nodeselect", function(e) {
		if (e.isLeaf) {
/*  			grid.load({
				name : e.node.id
			});  */
			
 			grid.loading("读取数据中，请稍后......");
			$.ajax({
				url : "${path}/getTable.html",
				data : {
					name : e.node.id
				},
				type : "post",
				success : function(text) {
					// alert(text);
					grid.setData(text.fields);
					setPropGrid(text.name, text.text, text.description, text.keyGenerate);
				},
				error : function(jqXHR, textStatus, errorThrown) {
					// alert(jqXHR.responseText);
					mini.showMessageBox({
						title : "错误",
						message : jqXHR.responseText,
						buttons : [ "ok" ],
						iconCls : "mini-messagebox-error"
					});
					grid.unmask();
				}
			}); 
		} else {
			grid.setData([]);
			grid.setTotalCount(0);
		}
	});
	/**
	 * 属性编辑器开始编辑事件
	 */
	 prop.on("cellbeginedit", function (e) {
        if (e.field == "value") {
            if(prop.indexOf(e.record)==0){
            	e.cancel=true;
            	return;
            }
            var editor = getEditor(e.record);
            e.editor = editor;
            e.column.editor = editor;
        }
    });
	/**
	 * 属性编辑器结束编辑事件
	 */
	 prop.on("cellcommitedit", function (e) {
        var record = e.record;
        if(prop.indexOf(record)==0){
        	e.cancel=true;
        	return;
        }
        if (e.field == "value") {
            var format = e.record.format;
            if (format) {
                e.value = mini.formatDate(e.value, format);
            }
        }
    });
    function getEditor(record){
        var id = record.id;
        var editor = mini.get(id);
        return editor;
    }

/*********************************************************
 * 用户按钮操作方法
 *********************************************************/
	/**
	 * 新增字段
	 */
	function addRow() {
		var node = tree.getSelectedNode();
		if (node) {
			var newRow = {
				pk : false,
				canNull : true,
				type : "定长文本"
			};
			newRow.dept_id = node.name;
			grid.addRow(newRow, grid.getData().length);
		}
	}
	/**
	 * 删除字段
	 */
	function removeRow() {
		var rows = grid.getSelecteds();
		if (rows.length > 0) {
			grid.removeRows(rows, true);
		}
	}
	/**
	 * 保存字段
	 */
	function saveData() {
		var data = grid.getChanges();
		var json = mini.encode(data);
		var node = tree.getSelectedNode();
		var tableName = node.id;
		var pro =  prop.getData();
 		var ss = [ {
				"tableName" : tableName,
				"name" : pro[0].value,
				"text" : pro[1].value,
				"description" : pro[2].value,
				"keyGenerate" : pro[3].value
			} ];
		json = addParamToJson(json, ss);
		// alert(json);
		grid.loading("保存中，请稍后......");
		$.ajax({
			url : "${path}/save.html",
			data : {
				data : json
			},
			type : "post",
			success : function(text) {
				grid.setData(text.fields);
				setPropGrid(text.name, text.text, text.description, text.keyGenerate);
			},
			error : function(jqXHR, textStatus, errorThrown) {
				// alert(jqXHR.responseText);
				mini.showMessageBox({
					title : "错误",
					message : jqXHR.responseText,
					buttons : [ "ok" ],
					iconCls : "mini-messagebox-error"
				});
				grid.unmask();
			}
		});
	}

	/**
	 * 新增数据库表定义
	 */
	function addTable() {
		mini.prompt("请输入表名称：", "请输入", function(action, value) {
			if (action == "ok") {
				$.ajax({
					url : "${path}/addTable.html",
					data : {
						name : value
					},
					type : "post",
					success : function(text) {
						var node = tree.getNode("all");
						var newNode = {
							name : value
						};
						tree.addNode(newNode, "add", node);
					},
					error : function(jqXHR, textStatus, errorThrown) {
						mini.showMessageBox({
							title : "错误",
							message : jqXHR.responseText,
							buttons : [ "ok" ],
							iconCls : "mini-messagebox-error"
						});
					}
				});
			}
		});
	}

	/**
	 * 删除数据库表定义
	 */
	function removeTable() {
		mini.confirm("确定删除记录？", "确定？", function(action) {
			if (action == "ok") {
				var node = tree.getSelectedNode();
				$.ajax({
					url : "${path}/deleteTable.html",
					data : {
						name : node.id
					},
					type : "post",
					success : function(text) {
						tree.removeNode(node);
						grid.setData([]);
						grid.setTotalCount(0);
						setPropGrid("", "", "", "");
					},
					error : function(jqXHR, textStatus, errorThrown) {
						mini.showMessageBox({
							title : "错误",
							message : jqXHR.responseText,
							buttons : [ "ok" ],
							iconCls : "mini-messagebox-error"
						});
					}
				});
			}
		});
	}

	/**
	 * 保存数据库表定义
	 */
	function saveAll() {
		$.ajax({
			url : "${path}/saveAll.html",
			data : {},
			type : "post",
			success : function(json) {
				mini.showMessageBox({
					title : "提示",
					message : json.message,
					buttons : [ "ok" ],
					iconCls : "mini-messagebox-info"
				});
			},
			error : function(jqXHR, textStatus, errorThrown) {
				mini.showMessageBox({
					title : "错误",
					message : jqXHR.responseText,
					buttons : [ "ok" ],
					iconCls : "mini-messagebox-error"
				});
			}
		});
	}

</script>

</body>
</html>